const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

// 渲染器渲染
export default class Circle {
  constructor() {

    // 定义渲染主角的属性
    this.voiceData = this.voiceData
    this.loaded = this.loaded
    this.x = screenWidth / 2 - this.width / 2
    this.y = screenHeight / 2 - this.height / 2
    this.index = 0
    this.points = []
    this.avg_points = []
    this.status = false
    this.avgData = []
  }
  getData(avgData) {
    this.avgData = avgData
    // console.log(this.avgData)
    this.createPoints()
  }
  createPoints() {
    let i;

    i = -1;
    while (++i < 18) {
      this.points.push(new this.Point({
        index: i + 1
      }));
    }

    i = -1;
    while (++i < 18) {
      this.avg_points.push(new this.AvgPoint({
        index: i + 1
      }));
    }
  }
  Point(config) {
    this.vw = window.innerWidth
    this.vh = window.innerHeight
    this.index = config.index;
    this.angle = (this.index * 360) / 18;
    this.radius = Math.abs(this.vw, this.vh) / 10;
    this.x = (this.vw / 2) + this.radius * Math.sin((Math.PI / 180) * this.angle);
    this.y = (this.vh / 2) + this.radius * Math.cos((Math.PI / 180) * this.angle);
    this.value = Math.random() * 256;
    this.dx = this.x + this.value * Math.sin((Math.PI / 180) * this.angle);
    this.dy = this.y + this.value * Math.cos((Math.PI / 180) * this.angle);
  }
  AvgPoint(config) {
    this.vw = window.innerWidth
    this.vh = window.innerHeight
    this.index = config.index;
    this.angle = (this.index * 360) / 18;
    this.radius = Math.abs(this.vw, this.vh) / 10;
    this.x = (this.vw / 2) + this.radius * Math.sin((Math.PI / 180) * this.angle);
    this.y = (this.vh / 2) + this.radius * Math.cos((Math.PI / 180) * this.angle);
    this.value = Math.random() * 256;
    this.dx = this.x + this.value * Math.sin((Math.PI / 180) * this.angle);
    this.dy = this.y + this.value * Math.cos((Math.PI / 180) * this.angle);
  }

  render(ctx) {

    this.index++

    var i, len, p, value, xc, yc;

    if (this.avgData[this.index] > 18) {
      this.rotation += -0.001;
      value = this.avgData[this.index] + Math.random() * 10;
      ctx.strokeStyle = 'rgba(77, 218, 248, 1)';
      ctx.fillStyle = 'rgba(29, 36, 57, 0.05)';
    } else {
      this.rotation += 0.001;
      value = this.avgData[this.index];
      ctx.strokeStyle = 'rgba(77, 218, 248, 1)';
      ctx.fillStyle = 'rgba(29, 36, 57, 0.1)';
    }

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.lineCap = "round";

    ctx.save();
    ctx.translate((this.vw / 2), (this.vh / 2));
    ctx.rotate(this.rotation);
    ctx.translate(-(this.vw / 2), -(this.vh / 2));

    ctx.moveTo(this.avg_points[0].dx, this.avg_points[0].dy);

    for (i = 0, len = 18; i < len - 1; i++) {
      p = this.avg_points[i];
      p.dx = p.x + value * Math.sin((Math.PI / 180) * p.angle);
      p.dy = p.y + value * Math.cos((Math.PI / 180) * p.angle);
      xc = (p.dx + this.avg_points[i + 1].dx) / 2;
      yc = (p.dy + this.avg_points[i + 1].dy) / 2;

      ctx.quadraticCurveTo(p.dx, p.dy, xc, yc);
    }

    p = this.avg_points[i];
    p.dx = p.x + value * Math.sin((Math.PI / 180) * p.angle);
    p.dy = p.y + value * Math.cos((Math.PI / 180) * p.angle);
    xc = (p.dx + this.avg_points[0].dx) / 2;
    yc = (p.dy + this.avg_points[0].dy) / 2;

    ctx.quadraticCurveTo(p.dx, p.dy, xc, yc);
    ctx.quadraticCurveTo(xc, yc, this.avg_points[0].dx, this.avg_points[0].dy);

    ctx.stroke();
    ctx.fill();
    ctx.restore();
    ctx.closePath();

    i = len = p = value = xc = yc = null;
  }
}